<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="margin-top: 10px">
      <div class="layui-form-item" hidden>
      <label class="layui-form-label">加油站id-维护字段--主键</label>
      <div class="layui-input-block">
        <input type="jcxxId" name="jcxxId" placeholder="请输入加油站id-维护字段--主键" autocomplete="off" class="layui-input">
      </div>
    </div>
    
        <div class="layui-form-item">
      <label class="layui-form-label">加油机名称</label>
      <div class="layui-input-block">
        <input type="jyjMc" name="jyjMc" placeholder="请输入加油机名称" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">型号</label>
      <div class="layui-input-block">
        <input type="jyjXh" name="jyjXh" placeholder="请输入型号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">加油机状态</label>
      <div class="layui-input-block">
        <!-- <input type="jyjZt" name="jyjZt" placeholder="请输入加油机状态 0在用|1暂时停用|2损坏停用|3不再使用" autocomplete="off" class="layui-input"> -->
      	
      	<select name="jyjZt">
        	<option value="">请选择</option>
        	<option value="0">在用</option>
        	<option value="1">暂时停用</option>
        	<option value="2">损坏停用</option>
        	<option value="3">不再使用</option>
        </select>
      
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">启用时间</label>
      <div class="layui-input-block">
        <input type="qysj" name="qysj" placeholder="请输入启用时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">加油枪1号</label>
      <div class="layui-input-block">
        <!-- <input type="jyq1" name="jyq1" placeholder="请输入加油枪1号-说明 1、92#汽油|2、95#汽油|3、0#汽油|4、-10#柴油|5、-20#柴油|6、-35#柴油|7、98#汽油|8、该枪暂停使用" autocomplete="off" class="layui-input"> -->
      	
      	<select name="jyq1">
        	<option value="">请选择</option>
        	<option value="0">92#汽油</option>
        	<option value="1">95#汽油</option>
        	<option value="2">0#汽油</option>
        	<option value="3">-10#柴油</option>
        	
        	<option value="4">-10#柴油</option>
        	<option value="5">-20#柴油</option>
        	<option value="6">-35#柴油</option>
        	<option value="7">98#汽油</option>
        	<option value="8">该枪暂停使用</option>
        	
        </select>
      	
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">加油枪2号</label>
      <div class="layui-input-block">
        <!-- <input type="jyq2" name="jyq2" placeholder="请输入加油枪2号" autocomplete="off" class="layui-input"> -->
      	<select name="jyq2">
        	<option value="">请选择</option>
        	<option value="0">92#汽油</option>
        	<option value="1">95#汽油</option>
        	<option value="2">0#汽油</option>
        	<option value="3">-10#柴油</option>
        	
        	<option value="4">-10#柴油</option>
        	<option value="5">-20#柴油</option>
        	<option value="6">-35#柴油</option>
        	<option value="7">98#汽油</option>
        	<option value="8">该枪暂停使用</option>
        	
        </select>
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">加油枪3号</label>
      <div class="layui-input-block">
        <!-- <input type="jyq3" name="jyq3" placeholder="请输入加油枪3号" autocomplete="off" class="layui-input"> -->
      	
      	<select name="jyq3">
        	<option value="">请选择</option>
        	<option value="0">92#汽油</option>
        	<option value="1">95#汽油</option>
        	<option value="2">0#汽油</option>
        	<option value="3">-10#柴油</option>
        	
        	<option value="4">-10#柴油</option>
        	<option value="5">-20#柴油</option>
        	<option value="6">-35#柴油</option>
        	<option value="7">98#汽油</option>
        	<option value="8">该枪暂停使用</option>
        	
        </select>
      	
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">加油枪4号</label>
      <div class="layui-input-block">
        <!-- <input type="jyq4" name="jyq4" placeholder="请输入加油枪4号" autocomplete="off" class="layui-input"> -->
      	<select name="jyq4">
        	<option value="">请选择</option>
        	<option value="0">92#汽油</option>
        	<option value="1">95#汽油</option>
        	<option value="2">0#汽油</option>
        	<option value="3">-10#柴油</option>
        	
        	<option value="4">-10#柴油</option>
        	<option value="5">-20#柴油</option>
        	<option value="6">-35#柴油</option>
        	<option value="7">98#汽油</option>
        	<option value="8">该枪暂停使用</option>
        	
        </select>
      
      </div>
    </div>
    
    
        <div class="layui-form-item">
      <label class="layui-form-label">加油机外观-照片</label>
      <div class="layui-input-block">
        <button type="button" class="layui-btn" id="jyjwgZpUpload">
			<i class="layui-icon">&#xe67c;</i>上传文件
		</button>
        <input type="jyjwgZp" name="jyjwgZp" placeholder="请输入加油机外观-照片" autocomplete="off" class="layui-input layui-btn-disabled">
      </div>
    </div>
        <div class="layui-form-item" hidden>
      <label class="layui-form-label">更新时间</label>
      <div class="layui-input-block">
        <input type="updateTime" name="updateTime" placeholder="请输入更新时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <input name="id" hidden/>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>


<div class="table_div1">
  <div id="searchParam">
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="text" id="nameInput" class="layui-input"  autocomplete="off" placeholder="请输入加油站名称">
      </div>

      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search1()" id="search">查询</button>
      </div>
      
      <div class="layui-input-inline "> 
        <button class="layui-btn" onclick="exportTemplate()">导出模板</button>
      </div>
      <div class="layui-input-inline ">
        <button class="layui-btn" id="importData">导入数据</button>
      </div>
      
    </div>

  </div>
  <table class="layui-table" id="showTable1" lay-filter="showTable1" ></table>
</div>


<div class="table_div2" hidden>
  <div id="searchParam">
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <button class="layui-btn layui-btn-primary btn_cancel">返回</button>
      </div>
    </div>
  </div>
  <table class="layui-table" id="showTable2" lay-filter="showTable2" ></table>
</div>






<script type="text/html" id="tool1">
  <a class="layui-btn layui-btn-xs" lay-event="add">添加-加油机信息</a>
  <a class="layui-btn layui-btn-xs" lay-event="view">查看-加油机信息</a>
</script>
<script type="text/html" id="tool2">
  <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  var upload = layui.upload;

  layui.use(['table', 'layer', 'laydate','upload'], function () {
	

	  upload.render({
			elem: '#importData' //绑定元素
			,url: '/gas/jyjxx/importData?authorization='+tokenQuery //上传接口
			,exts: 'xlsx' //限制上传文件
			,size:"204800"
			,before: function(obj){
				layer.msg('文件上传中...', {
				icon: 16,
				shade: 0.01,
				time: 0
				})
			}
			,done: function(res){
				if(res.code == "0"){
					layer.msg("导入文件上传成功！");
					search();
				}else{
					layer.msg(res.msg);
				}
		      }
		      ,error: function(){
		    	  layer.msg("文件上传失败，请稍后重试！");
		      }
		  	});
	  
	  
	  
	  upload.render({
			elem : '#jyjwgZpUpload' //绑定元素
			,exts: 'jpg|png|gif|jpeg'
			,url : '/sysFiles/upload?authorization=' + tokenQuery //上传接口
			,before: function(obj){
		  	      layer.msg('文件上传中...', {
		    			icon: 16,
		    			shade: 0.01,
		    			time: 0
				  })
			}
			,done : function(res) {
				if(res.code == '0'){
	  	    		  layer.msg("文件上传成功！");
	  	    		  $(".operation input[name=jyjwgZp]").val(res.data.src);
	  	    	  }else{
	  	    		  layer.msg(res.msg);
	  	    		  
	  	    	  }
				//上传完毕回调
			},
			
			error : function() {
				//请求异常回调
				layer.msg("上传失败!原因："+res.msg);
	  	    	return false;
			}
		});
	  
	  
	//加载table
	    tableIns1 = table.render({
	      elem: '#showTable1'
	      , contentType: 'application/json'
	      , headers: {"authorization": token}
	      , page: true //开启分页
	      , url: '/gas/stationinfo/list1' //数据接口
	      , method: 'POST'
	      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
	        return {
	          "code": res.code, //解析接口状态
	          "msg": res.msg, //解析提示文本
	          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
	          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
	        }
	      }
	      , cols: [
	        [
	          {type: 'checkbox', fixed: 'left'},
	          {field: 'id', title: '主键', sort: true, hide: true},
	          {field: 'name', title: '加油站名称', width: 520,sort: true},
	          {field: 'taxorgName', title: '所属机关', width: 400,sort: true}, 
	          
			  {width: 280, toolbar: "#tool1", title: '操作',fixed: 'right'},
	        ]
	      ]
	      , toolbar: '#toolbar'
	    });
	  
	  
	  
    //加载table
    tableIns2 = table.render({
      elem: '#showTable2'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/gas/jyjxx/list' //数据接口
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'jcxxId', title: '加油站id-维护字段--主键', sort: true},
          {field: 'jyjMc', title: '加油机名称', sort: true},
          {field: 'jyjXh', title: '型号', sort: true},
          {field: 'jyjZt', title: '加油机状态 0在用|1暂时停用|2损坏停用|3不再使用', sort: true},
          {field: 'qysj', title: '启用时间', sort: true},
          {field: 'jyq1', title: '加油枪1号-说明 1、92#汽油|2、95#汽油|3、0#汽油|4、-10#柴油|5、-20#柴油|6、-35#柴油|7、98#汽油|8、该枪暂停使用', sort: true},
          {field: 'jyq2', title: '加油枪2号', sort: true},
          {field: 'jyq3', title: '加油枪3号', sort: true},
          {field: 'jyq4', title: '加油枪4号', sort: true},
          {field: 'jyjwgZp', title: '加油机外观-照片', sort: true},
          {field: 'updateTime', title: '更新时间', sort: true},
          {field: 'id', title: '主键', sort: true},
          {width: 120, toolbar: "#tool2", title: '操作'}
        ]
      ]
      , toolbar: '#toolbar'
    });

    //列操作
    table.on('tool(showTable1)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'add':
        	$(".table_div1").hide();
        	$(".table_div2").hide();
            $(".operation").show();
            $(".title").html("新增");
            $(".operation input[name=jcxxId]").val(data.id);
            $(".operation input[name=jyjMc]").val("");
            $(".operation input[name=jyjXh]").val("");
            $(".operation input[name=jyjZt]").val("");
            $(".operation input[name=qysj]").val("");
            $(".operation input[name=jyq1]").val("");
            $(".operation input[name=jyq2]").val("");
            $(".operation input[name=jyq3]").val("");
            $(".operation input[name=jyq4]").val("");
            $(".operation input[name=jyjwgZp]").val("");
            $(".operation input[name=updateTime]").val("");
            $(".operation input[name=id]").val("");
            
          break;
        case 'view':
        	$(".table_div1").hide();
        	$(".table_div2").show();
            $(".operation").hide();
            
        	search2(data.id);
          break;
      }
    });

    table.on('tool(showTable2)',function (obj) {
        var data = obj.data;
        switch (obj.event) {
          case 'delete':
	          var ids=[];
	          ids.push(data.id);
	          tipDialog(ids,data.jcxxId);
	          
            break;
          case 'edit':
        	  $(".table_div1").hide();
        	  $(".table_div2").hide();
        	  
              $(".operation").show();
              $(".title").html("编辑");
              $(".operation input[name=jcxxId]").val(data.jcxxId);
              $(".operation input[name=jyjMc]").val(data.jyjMc);
              $(".operation input[name=jyjXh]").val(data.jyjXh);
              $(".operation input[name=jyjZt]").val(data.jyjZt);
              $(".operation input[name=qysj]").val(data.qysj);
              $(".operation input[name=jyq1]").val(data.jyq1);
              $(".operation input[name=jyq2]").val(data.jyq2);
              $(".operation input[name=jyq3]").val(data.jyq3);
              $(".operation input[name=jyq4]").val(data.jyq4);
              $(".operation input[name=jyjwgZp]").val(data.jyjwgZp);
              $(".operation input[name=updateTime]").val(data.updateTime);
              $(".operation input[name=id]").val(data.id);
              
            break;
        }
      });
    
    
    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        key: $("#key").val()
      };
      CoreUtil.sendPost("/gas/jyjxx/list", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //删除
    var tipDialog=function (ids,jcxxid) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/gas/jyjxx/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search2(jcxxid);
            });
          });
        }
      });
    };

    //返回
    $(".btn_cancel").click(function() {
        $(".table_div1").show();
        $(".table_div2").hide();
        
        $(".operation").hide();
        return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/gas/jyjxx/add",data.field,function (res) {
        	$(".table_div1").show();
            $(".table_div2").hide();
            $(".operation").hide();
            search1();
        });
      }else {
        CoreUtil.sendPut("/gas/jyjxx/update",data.field,function (res) {
        	$(".table_div1").hide();
            $(".table_div2").show();
            $(".operation").hide();
          	search2(data.field.jcxxId);
        });
      }

      return false;
    });
  });
	
  
  
  //执行查询
  function search1() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
    	  name: $("#nameInput").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
  
  function search2(id) {
	    //这里以搜索为例
	    tableIns2.reload({
	      where: { //设定异步数据接口的额外参数，任意设
	    	  jcxxId: id
	      }
	      , page: {
	        curr: 1 //重新从第 1 页开始
	      }
	    });
	};
	
	   function exportTemplate(){
			  var map = {
					name: $("#nameInput").val()
			  }
			  
			  CoreUtil.sendPost("/gas/jyjxx/exportTemplate",map,function (res) {
				  if(res.code == 0){
					var file = res.data[2];
					window.open(file,'_blank');
				  }else{
					layer.msg(res.msg);
					return false;
				  }
		          
			  });
	   }
		
	   function importData(){
			
	   }
	   
	   
</script>